<template>
  <!-- 前台店铺页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 添加按钮 -->
    <div class="abvoeBox">
        <template>
            <el-radio v-model="resolutionStatus" :label="0" @change="selectCommodityOrderComplaintEntityTwoTable()">未解决</el-radio>
            <el-radio v-model="resolutionStatus" :label="1" @change="selectCommodityOrderComplaintEntityTwoTable()">已解决</el-radio>
        </template>
    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
       <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="orderId"
            width="200px"
            label="订单Id">
            </el-table-column>
            <el-table-column
            prop="shopAddress"
            label="店铺地址" >
            </el-table-column>
            <el-table-column
            prop="complaintText"
            width="200px"
            label="申诉内容">
            </el-table-column>
            <el-table-column
            prop="createTime"
            width="200px"
            label="申诉时间">
            </el-table-column>
            <el-table-column
            prop="resolutionStatus"
            label="是否解决 ">
            <template slot-scope="scope">
                <p>{{scope.row.resolutionStatus===0?"未解决":"已解决"}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="resolutionTime"
            width="200px"
            fixed="right"
            label="解决时间">
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 模糊查询（用户名称）
      resolutionStatus: 0,
      // 全查后台用户表数据集
      tableData: [],
      // 分页 （pageSize）一页展示5条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 5,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0
    }
  },
  mounted () {
    // 全查前台用户表（模糊查用户名称）
    this.selectCommodityOrderComplaintEntityTwoTable()
  },
  methods: {
    // 全查前台用户表（模糊查用户名称）
    selectCommodityOrderComplaintEntityTwoTable () {
      if (window.sessionStorage.getItem('countyId') === 'null') {
        window.sessionStorage.setItem('countyId', '')
      }
      const countyId = window.sessionStorage.getItem('countyId')
      debugger
      this.$axios.get('/eat-service/commodityOrderComplaint/selectCommodityOrderComplaintEntityTwoTable',
        {
          params: {
            resolutionStatus: this.resolutionStatus,
            roleId: window.sessionStorage.getItem('roleId'),
            countyId: countyId,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectShopEntity()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectShopEntity()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
    }
    .belowBox{
        margin-top: 20px;
    }
    .p1{
      border: none;
      background: none;
    }
    .p1:hover{
      color: #31c27c;
    }
    .span1{
      margin-left: 5px;
      color: red;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
